<template>
  <div>
    <el-forms :model="formData" />
    <el-form ref="form" :model="formData" :rules="rules" label-width="80px">
      <!-- 表单项 -->
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="formData.mobile"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <el-input v-model="formData.code"></el-input>
      </el-form-item>
      <el-form-item label="特别说明">
        <el-input v-model="formData.other"></el-input>
      </el-form-item>
      <!-- 提交 -->
      <el-form-item>
        <el-button type="primary" @click="onSubmit">登录</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import ElForms from './child.vue'
export default {
  components: {
    ElForms
  },
  data () {
    // 定义自定义校验函数（复杂校验）
    /**
     * rule 校验规则
     * value 表单项输入的值
     * callback（函数）=》决定是否通过校验=> 1. 校验失败调用callback(new Error('错误说明')) 2. 通过=》 callback()
     */
    const validateMobile = (rule, value, callback) => {
      if (
        !/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(
          value
        )
      ) {
        callback(new Error('手机号格式错误！'))
      } else {
        callback()
      }
    }
    // 返回定义变量
    return {
      // 表单数据
      formData: {
        // 手机号
        mobile: '',
        // 验证码
        code: '',
        other: ''
      },
      // 表单数据校验规则: 1. 校验规则的属性名和要校验的表单数据的属性名一样
      rules: {
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: validateMobile, trigger: 'blur' }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'change' }
        ],
        code: [
          {
            min: 4,
            max: 8,
            message: '长度在 4 到 8 个字符',
            trigger: 'change'
          }
        ]
      }
    }
  },
  methods: {
    // 登录
    async onSubmit () {
      // console.log(this.$refs.form.validate())
      // 写法1
      // this.$refs.form.validate((res) => {
      //   console.log(res)
      //   if (res) {
      //     // 校验通过
      //     console.log('登录')
      //   }
      // })
      // 写法2(推荐)
      try {
        await this.$refs.form.validate()
        // 校验通过=》执行到这里
        console.log('登录', this.formData)
      } catch (e) {
        // 校验不通过走到这里
        console.log(e)
      }
    },
    // 重置表单=>只能重置校验字段
    resetForm () {
      this.formData.other = '' // 手动
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
</style>
